<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标签生成器</title>

    <style>
       body {
    background-color: #ffffff;
    margin: 0;
    padding: 20px;
    font-family: Arial, sans-serif;
}

.container {

    max-width: 800px;
    margin: 0 auto;
}


    </style>
</head>
<body>
    <div class="container">
        <h1>标签生成器</h1>

        <form id="uploadForm" enctype="multipart/form-data">
            <input type="file" id="imageInput" name="image" accept="image/*"><br>
            <input type="text" id="questionInput" name="question" placeholder="提问">
            <button type="button" onclick="uploadImage()">提问</button>

        </form>
        <h2>以下为生成标签：</h2>
        <p id="result"></p>
    </div>

    <script>
        function uploadImage() {
            const formData = new FormData();
            const imageInput = document.getElementById('imageInput').files[0];
            const questionInput = document.getElementById('questionInput').value;
            formData.append('image', imageInput);
            formData.append('question', questionInput);

            fetch('/imageDetect', {
                method: 'POST',
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    document.getElementById('result').innerText = data.answer;
                } else {
                    document.getElementById('result').innerText = '识别失败：' + data.message;
                }
            })
            .catch(error => {
                console.error('上传图片时发生错误：', error);
                document.getElementById('result').innerText = '上传图片时发生错误';
            });
        }
    </script>
</body>
</html>